<template>
  <el-col :span="24" class="d-flex justify-content-center flex-column align-items-center" style="margin-top: 10%">
    <el-col :span="24">
      <HomeHeader></HomeHeader>
    </el-col>
    <el-col :span="15">
      <el-carousel height="600px" :autoplay="false" class="bg-light" indicator-position="none">
        <el-carousel-item v-for="item in paper" :key="item.id">
          <p style="font-size: 80px;letter-spacing: 8px" class="pt-5 pb-5">{{ item.topic }}</p>
          <p style="font-size: 19px" class="text-secondary">translate: <span
            style="color: #360707">{{ item.tran }}</span></p>
          <el-tooltip class="item" effect="dark" content="输入空出的内容,例: a_p_e,输入pl" placement="right">
            <el-input style="width: 200px;outline: red" class="border-danger"
                      v-model="item.input"
                      @input="(val)=>inputChange(val,item.answer,item.id,item.prId,item.createTime)"
                      v-if="item.input != item.answer && item.finish==2" :class="'input-'+item.id"></el-input>
            <el-input style="width: 200px;outline: red" class="border-danger"
                      v-model="item.answer" v-if="item.input == item.answer || item.finish==1" readonly></el-input>
          </el-tooltip>
          <p class="pt-2 pb-2" :class="'input-tip'+item.id"></p>
          <p class="text-success pt-1" style="font-size: 18px" v-if="item.input == item.answer || item.finish==1">
            {{ item.word }}</p>
          <p class="text-primary pt-1" v-if="item.input == item.answer || item.finish==1" v-html="item.example"></p>

          <el-col>
            <el-popover
              placement="bottom"
              width="200"
              trigger="click">
              <p class="text-center pt-1" style="font-size: 20px;color: #360707">{{ item.word }}</p>
              <el-button slot="reference" plain>提示</el-button>
            </el-popover>
            <el-button plain @click="addError(item.id)">
              添加到错题本
            </el-button>
          </el-col>
        </el-carousel-item>
      </el-carousel>
    </el-col>


  </el-col>

</template>

<script>
import $ from 'jquery'
import HomeHeader from '@/components/HomeHeader'

export default {
  name: 'paper',
  components: { HomeHeader },
  data () {
    return {
      paper: [
        {
          answer: '',
          createTime: '',
          example: '',
          id: '',
          prId: '',
          topic: '',
          tran: '',
          word: '',
          input: '',
          finish: 2
        }
      ]
    }
  },
  mounted () {
    let userId = this.$route.query.userId
    let planId = this.$route.query.planId
    let type = this.$route.query.type
    let createTime = this.$route.query.createTime

    if (userId != null && planId != null && type != null && createTime != null) {
      this.$http.getPracticeWords({
        userId: userId,
        planId: planId,
        type: type,
        createTime: createTime
      }).then(res => {
        this.paper = res.data.paper
        console.log(this.paper)
      })
    }

  },
  methods: {
    inputChange (val, word, id, prId, createTime) {

      if (val != word) {
        $('.input-tip' + id).removeClass('input-tip-green')
        $('.input-tip' + id).addClass('input-tip-red')
        $('.input-tip' + id).text('X')
      } else {
        $('.input-tip' + id).removeClass('input-tip-red')
        $('.input-tip' + id).addClass('input-tip-green')
        $('.input-tip' + id).text('√')
        console.log(createTime)
        this.$http.updateFinish({
          id: id,
          prId: prId,
          ct: createTime
        }).then(res => {

        })
        // console.log(id + prId)
      }

    },
    addError (id) {

    },
    hint (word) {

    }
  }
}
</script>

<style scoped>
.input-tip-red {
  color: red;
}

.input-tip-green {
  color: green;
}
</style>
